<template>
  <div class="content">
    <div class="TitleBar">
      <TitleBar :imgUrl="url" :Title="'确认订单'"></TitleBar>
    </div>
    <template>
      <div class="flex-start">
        <div class="main_box">
          <!-- 收货地址 -->
          <div class="order_address">
            <div class="order_address_title title-style">收货地址</div>
            <div
              :class="
                is_default == true ? 'default_address' : 'order_adderss_item'
              "
            >
              <div class="">陈同学</div>
              <div class="adderss_item_info">13568946589</div>
              <div class="adderss_item_info">
                福建省 厦门市 集美区 后溪镇 天马路288号
              </div>
            </div>
          </div>
          <!-- 商品信息 -->
          <div class="product_info">
            <div class="product_info_title title-style">商品信息</div>
            <div class="product_info_list">
              <div class="product_info_list_item" v-for="(item,index) in orderIdList" :key="index">
                <div class="list_left">
                  <img
                    class="product_img"
                    :src="item.goods_info.goods_img"
                    alt=""
                  />
                  <div class="product_name">{{ item.goods_info.goods_name }}</div>
                </div>
                <div class="list_right">
                  <div class="unit-price-num">{{item.goods_info.goods_pprice}}元x{{ item.goods_num }}</div>
                  <div class="sub-total" style="color: #ff6700">{{item.goods_info.goods_pprice*item.goods_num}}元</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 配送方式Delivery method -->
          <div class="delivery-method">
            <div class="delivery-method-title title-style">配送方式</div>
            <div class="method">包邮</div>
          </div>
          <!-- 发票 -->
          <div class="invoice">
            <div class="invoice-title title-style">发票</div>
            <span class="invoice-item">电子发票</span>
            <span class="invoice-item">个人</span>
            <span class="invoice-item">商品明细</span>
          </div>

          <!-- 商品明细 -->
          <div class="product_defined">
            <div class="product_defined_item">
              <span>商品件数:</span>
              <span class="frinend-color">{{product_num}}件</span>
            </div>
            <div class="product_defined_item">
              <span>商品总价:</span>
              <span class="frinend-color">{{product_totalMoney}}元</span>
            </div>
            <div class="product_defined_item">
              <span>活动优惠:</span>
              <span class="frinend-color">{{product_disc}}元</span>
            </div>
            <div class="product_defined_item">
              <span>优惠券抵扣:</span>
              <span class="frinend-color">{{product_coupon}}元</span>
            </div>
            <div class="product_defined_item">
              <span>运费:</span>
              <span class="frinend-color">{{product_freight}}元</span>
            </div>
            <div class="product_defined_item defined_item-paymoney">
              <span>应付总额:</span>
              <span class="frinend-color pay-money">{{total_amount}}元</span>
            </div>
          </div>
          <!-- 底部按钮 -->
          <div class="bottom-btn">
            <el-button class="backCart btn" @click="goBack">返回购物车</el-button>
            <el-button type="primary" class="to-pay btn" @click="toPay"
              >结算</el-button
            >
          </div>
        </div>
      </div>
    </template>
    <!-- <template v-else>
            <el-empty :style="{height:screnHeight-206+'px'}" description="您的订单空空如也！"></el-empty>
        </template> -->
  </div>
</template>
    
<script>
import { mapMutations, mapState } from "vuex";
import TitleBar from "../components/TitleBar.vue";
export default {
  data() {
    return {
      url: require("../static/imgs/订单.png"),
      orderIdList: [],
      screnHeight: document.body.clientHeight,
      is_default: true, //是否为默认地址
      product_num:null, //商品件数
      product_totalMoney:null,//商品总价
      product_disc:null,//商品优惠
      product_coupon:null,//商品优惠券
      product_freight:null, //商品运费
      total_amount:null,//应付总额
    };
  },
  components:{
    TitleBar
  },
  computed: {
    ...mapState({
      selectArray: (state) => state.order.selectArray,
    }),
  },
  created() {
    console.log(this.selectArray);
    this.orderIdList = this.selectArray;
    if (this.orderIdList.length < 1) {
      this.$router.back();
      this.$message({
        message: "请勾选商品后再结算",
      });
    }
    this.acountProduct()
  },
  methods: {
    acountProduct(){
        this.selectArray.forEach((item,index)=>{
            this.product_num += item.goods_num 
            this.product_totalMoney += item.goods_num*item.goods_info.goods_pprice
            this.product_disc  = 3.00
            this.product_coupon = 8.00
            this.product_freight = 0.00,
            this.total_amount = this.product_totalMoney - this.product_disc - this.product_coupon + this.product_freight
        })
    },
    // 返回购物车
    goBack(){
        this.$router.back()
    },
    // 结算
    toPay() {
      this.$confirm("确定结算提交订单吗", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.createOrder()
        
      }).catch(() => {
        this.$message({
            message: "已取消订单提交",
            type: "info",
          });
      });
    },
    //生成订单
    async createOrder(){
        const address_id = 1
        const goods_info = JSON.stringify(this.selectArray)
        const total= this.total_amount.toFixed(2)
        const res = await this.$http.post('/orders/createOrder',{address_id,goods_info,total})
        if(res.status == 200){
            this.$router.push('order')
            this.$message({
            message: "订单提交成功",
            type: "success",
          });
        }
    }
  }
};
</script>
    
    <style scoped>
.title-style {
  font-size: 18px;
}
/* 默认地址 */
.default_address {
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 20px;
  border: 1px solid #ff6700;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.flex-start {
  width: 100%;
  display: flex;
  justify-content: center;
}
.main_box {
  width: 75%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 40px 40px 20px 40px;
  background-color: #ffffff;
}
/* 寻常地址 */
.order_adderss_item {
  width: 200px;
  height: 150px;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 20px;
}
.adderss_item_info {
  margin-top: 14px;
}
/* 商品信息 */
.product_info {
  margin-top: 20px;
}

.product_info_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  padding: 4px 20px 4px 0px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.product_info_list_item {
  display: flex;
  height: 60px;
  justify-content: space-between;
}
.list_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list_right {
  width: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product_img {
  width: 40px;
}
.delivery-method {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #ccc;
}
.delivery-method-title {
  margin-right: 80px;
}
.method {
  color: #ff6700;
}
.invoice {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #ccc;
}
.invoice-title {
  margin-right: 120px;
}
.invoice-item {
  margin-right: 20px;
  color: #ff6700;
}
.product_defined {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px 20px 10px 0px;
  border-bottom: 1px solid #ccc;
}
.product_defined_item {
  display: flex;
  justify-content: space-between;
  width: 160px;
  margin-bottom: 10px;
}
.frinend-color {
  color: #ff6700;
}
.bottom-btn {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.to-pay {
  width: 120px;
}
.defined_item-paymoney {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pay-money {
  font-size: 22px;
}
</style>